<template>
  <div class="genshin-guide-container">
    <!-- 分类筛选区域 -->
    <div class="filter-section">
      <h2 class="page-title">提瓦特攻略合集</h2>
      <div class="tag-group">
        <span class="tag active">角色攻略</span>
        <span class="tag">武器搭配</span>
        <span class="tag">圣遗物选择</span>
        <span class="tag">副本打法</span>
        <span class="tag">隐藏任务</span>
      </div>
    </div>

    <!-- 攻略卡片网格 -->
    <div class="guide-grid">
      <div 
        v-for="(item, index) in guides" 
        :key="index" 
        class="guide-card"
      >
        <div class="card-image">
          <img 
            :src="item.imageUrl" 
            alt="攻略封面" 
            class="cover-image"
            referrerpolicy="no-referrer"
          >
          <div class="card-badge" :class="item.typeClass">
            {{ item.type }}
          </div>
        </div>
        <div class="card-content">
          <h3 class="title">{{ item.title }}</h3>
          <div class="meta-info">
            <span class="author">
              <i class="fa fa-user-circle"></i> {{ item.author }}
            </span>
            <span class="views">
              <i class="fa fa-eye"></i> {{ item.views }}
            </span>
            <span class="date">
              <i class="fa fa-calendar"></i> {{ item.date }}
            </span>
          </div>
          <p class="description">{{ item.description }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 原神攻略数据
const guides = [
  {
    title: "纳西妲全方位培养指南",
    type: "角色攻略",
    typeClass: "badge-character",
    author: "提瓦特学者",
    views: "23.5K",
    date: "2024-05-15",
    description: "从技能机制到圣遗物选择，全面解析草神纳西妲的最佳培养方案",
    imageUrl: "https://c-ssl.duitang.com/uploads/blog/202211/04/20221104164934_b8c27.png"
  },
  {
    title: "深渊螺旋12层满星攻略",
    type: "副本打法",
    typeClass: "badge-dungeon",
    author: "深渊征服者",
    views: "18.7K",
    date: "2024-06-01",
    description: "最新深渊环境分析与队伍搭配推荐，教你轻松满星通关",
    imageUrl: "https://n.sinaimg.cn/sinakd20210819ac/155/w640h315/20210819/26fa-92a9489cf22ab39a5e6fd0a537c10593.jpg"
  },
  {
    title: "雷电将军武器选择与毕业面板",
    type: "武器搭配",
    typeClass: "badge-weapon",
    author: "武器专家",
    views: "15.2K",
    date: "2024-05-22",
    description: "薙刀、天空之脊、渔获...不同武器下的雷电将军配装思路",
    imageUrl: "https://upload-bbs.mihoyo.com/upload/2021/08/30/149106634/aa18b13d2bbb4b88225857c4f3731298_137319726649116405.png?x-oss-process=image/resize,s_600/quality,q_80/auto-orient,0/interlace,1/format,png"
  },
  {
    title: "风系角色聚怪技巧大全",
    type: "角色攻略",
    typeClass: "badge-character",
    author: "元素大师",
    views: "12.9K",
    date: "2024-05-10",
    description: "万叶、温迪、砂糖、琴...各风系角色聚怪手法与实战应用",
    imageUrl: "https://ts1.tc.mm.bing.net/th/id/R-C.03d6ca9bf38400aff629764154c3ea3b?rik=GQEQp1Uup588ug&riu=http%3a%2f%2finews.gtimg.com%2fnewsapp_match%2f0%2f15703949908%2f0&ehk=RNpGpKkuoW%2f9Y9jcdXbSnxqv7GgfPEdk6IftOEjIfJc%3d&risl=&pid=ImgRaw&r=0"
  },
  {
    title: "草系反应机制详解",
    type: "元素反应",
    typeClass: "badge-element",
    author: "提瓦特研究员",
    views: "11.3K",
    date: "2024-04-28",
    description: "绽放、超绽放、激化...全新草系反应机制深度解析与伤害计算",
    imageUrl: "https://media.9game.cn/gamebase/ieu-gdc-pre-process/images/20230207/6/22/9b1aa39bdabaffa7d85d79c4e2cff795.jpg"
  },
  {
    title: "须弥隐藏成就全收集",
    type: "隐藏任务",
    typeClass: "badge-achievement",
    author: "成就猎人",
    views: "9.8K",
    date: "2024-04-15",
    description: "须弥地区所有隐藏成就触发条件与完成方法，附详细坐标点位",
    imageUrl: "https://tse1-mm.cn.bing.net/th/id/OIP-C.oXR977YOgvcWSYhzu9puEwHaE4?r=0&rs=1&pid=ImgDetMain&cb=idpwebpc1"
  }
]
</script>

<style scoped>
/* 基础容器样式 */
.genshin-guide-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background: linear-gradient(to bottom, #f5f8ff, #e8f4ff);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(22, 93, 255, 0.15);
}

/* 分类筛选样式 */
.filter-section {
  margin-bottom: 30px;
  border-bottom: 2px solid #d6e8ff;
  padding-bottom: 20px;
}

.page-title {
  color: #165DFF;
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(22, 93, 255, 0.2);
}

.page-title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, #165DFF, #40C4FF);
  border-radius: 3px;
}

.tag-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 15px;
}

.tag {
  padding: 8px 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: 500;
  color: #4096FF;
  box-shadow: 0 2px 10px rgba(22, 93, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.tag::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: all 0.6s;
}

.tag:hover::before {
  left: 100%;
}

.tag.active {
  background: linear-gradient(135deg, #165DFF, #40C4FF);
  color: white;
  box-shadow: 0 4px 15px rgba(22, 93, 255, 0.25);
}

/* 攻略卡片网格 */
.guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.guide-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(22, 93, 255, 0.08);
  transition: all 0.3s;
  position: relative;
  border: 1px solid #e6f0ff;
}

.guide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(22, 93, 255, 0.15);
  border-color: #c5d9ff;
}

/* 卡片图片区域 */
.card-image {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.guide-card:hover .cover-image {
  transform: scale(1.08);
}

/* 卡片标签 */
.card-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.badge-character { background: #FF7F50; }
.badge-weapon { background: #40C4FF; }
.badge-dungeon { background: #9C27B0; }
.badge-element { background: #4CAF50; }
.badge-achievement { background: #FFC107; }

/* 卡片内容区域 */
.card-content {
  padding: 15px;
}

.title {
  font-size: 17px;
  color: #333;
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  transition: color 0.3s;
}

.guide-card:hover .title {
  color: #165DFF;
}

.meta-info {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #999;
  margin-bottom: 10px;
}

.meta-info span {
  display: flex;
  align-items: center;
  gap: 3px;
}

.description {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  text-overflow: ellipsis;
  min-height: 55px;
}
</style>